window.addEventListener('load', function() {
    //    1.功能一 鼠标经过左右箭头出现 移开隐藏
    var prev = document.querySelector(".prev");
    var next = document.querySelector(".next");
    var mybanner = document.querySelector(".mybanner");
    var imgw = document.querySelector("img").offsetWidth;
    mybanner.addEventListener('mouseenter', function() { //
        prev.style.display = 'block';
        next.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    mybanner.addEventListener('mouseleave', function() {
            prev.style.display = 'none';
            next.style.display = 'none';
            timer = setInterval(function() {
                //手动调用事件
                next.click();
            }, 2000);

        })
        //给图片 绑定移动动画
    function animate_2(obj, target, callback) {
        clearInterval(obj.timer); //pi'mia避免一个obj绑定多个定时器

        obj.timer = setInterval(function() { //给具体obj绑定定时器 节省空间
            // var step = Math.ceil((target - obj.offsetLeft) / 10);
            var step = (target - obj.offsetLeft) / 10;
            step > 0 ? Math.ceil(step) : Math.floor(step);
            if (obj.offsetLeft == target) {
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + step + 'px';
            // if (callback) {
            //     callback();
            // }
            callback && callback(); //短路
        }, 30);

    }
    var ul = document.querySelector(".circle-list");
    var ul_2 = document.querySelector('.hot');
    var children = ul.children;
    for (var i = 0; i < children.length; i++) { //这个循环很重要 给每个li绑定点击事件
        children[i].addEventListener('click', function() {
            for (var j = 0; j < children.length; j++) {
                children[j].className = 'circle';
            }
            this.className = 'circle active';
            var index = this.getAttribute('data-n');
            num = circle = index;

            console.log(index);



            animate_2(ul_2, -index * imgw);
        })

    }
    //给右边按钮添加一个点击事件
    var first = ul_2.children[0].cloneNode(true);
    ul_2.appendChild(first);
    var num = 0;
    var circle = 0;
    var flag = true;
    // 节流阀
    next.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == ul_2.children.length - 1) {
                ul_2.style.left = 0;
                num = 0;
            }
            num++;
            animate_2(ul_2, -num * imgw, function() {
                flag = true;

            })
            circle++;
            if (circle == children.length) {
                circle = 0;
            }
            circleChange();
        }
    })


    //给左边按钮添加一个点击事件
    // var first = ul_2.children[0].cloneNode(true);
    // ul_2.appendChild(first);
    var num = 0;
    var circle = 0;
    prev.addEventListener('click', function() {

        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul_2.children.length - 1;
                ul_2.style.left = -num * imgw + 'px';

            }
            num--;
            animate_2(ul_2, -num * imgw, function() {
                flag = true;
            })
            circle--;
            if (circle < 0) {
                circle = children.length - 1;
            }
            circleChange();
        }
    })

    function circleChange() {
        for (var j = 0; j < children.length; j++) {
            children[j].className = 'circle';
        }
        children[circle].className = 'circle active';
    }
    //自动播放
    var timer = setInterval(function() {
        //手动调用事件
        next.click();
    }, 2000);
})